<!--
 * @Author: 陈心怡
 * @Date: 2024-09-20 17:47:34
 * @LastEditors: 陈心怡
 * @LastEditTime: 2024-09-20 19:42:10
 * @FilePath: \vue3-web-study\src\views\apply\components\apply-form.vue
 * @Description: 
-->
<template>
  <div class="apply-container">
    <div class="w1200">
      <h3 class="form-title">入驻申请</h3>
      <el-form
        ref="refApplyForm"
        :model="applyForm"
        :rules="applyRules"
        class="apply-form"
        label-width="0"
        label-position="left"
      >
        <el-form-item prop="name">
          <el-input v-model="applyForm.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item prop="phone">
          <el-input v-model="applyForm.phone" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item prop="resource">
          <el-input v-model.number="applyForm.resource" placeholder="请输入资源" />
        </el-form-item>
        <el-form-item>
          <el-button
            round
            type="primary"
            size="large"
            style="width: 150px"
            @click="handleSubmit"
            :loading="loading"
            >提交信息
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { application } from '@/api/apply'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'

const validatePhone = (rule, value, callback) => {
  const reg = /^1[3-9]\d{9}$/
  if (!reg.test(value)) {
    callback(new Error('请输入正确的手机号'))
  } else {
    callback()
  }
}

const applyRules = {
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入手机号', trigger: 'blur', validator: validatePhone }],
  resource: [{ required: true, message: '请输入资源', trigger: 'blur' }]
}

const applyForm = ref({ name: '', phone: '', resource: '' })
const loading = ref(false)
const refApplyForm = ref(null)
const handleSubmit = async () => {
  loading.value = true
  await refApplyForm.value.validate(async (valid) => {
    if (valid) {
      loading.value = true
      try {
        const res = await application(applyForm.value)
        if (res.code === 20000) {
          loading.value = false
          ElMessage.success('申请成功，请等待审核')
          applyForm.value = { name: '', phone: '', resource: '' }
          // refApplyForm.value.resetFields()
        }
      } catch (error) {
        loading.value = false
        ElMessage.error('申请失败，请稍后再试')
      }
    } else {
      console.log('error submit!!')
    }
  })
}
</script>

<style lang="scss" scoped>
.apply-container {
  padding-top: 65px;
  height: 515px;
  background: url('@/assets/img/apply-bg.jpg') no-repeat center/cover;
  :deep(.el-input__inner) {
    height: 60px;
    line-height: 60px;
  }
}
.form-title {
  margin-bottom: 45px;
  border-left: 2px solid #333;
  padding-left: 20px;
  font-size: 30px;
  line-height: 36px;
  color: #333;
}
.apply-form {
  width: 500px;
}
</style>
